<template>
    <div class="con" v-show="isShare" @click="close">
        <img class="arr-img" src="@/assets/img/share/arr.png" alt="">
        <div class="space"></div>
        <div class="tr">
            <div class="red-num">1</div>
            <div class="t-text">点击右上角...按钮</div>
        </div>
        <div class="tr">
            <div class="red-num">2</div>
            <div class="t-text">
                选择
                <img class="share-img" src="@/assets/img/share/share.png" alt="">
                发送给好友
            </div>
        </div>
        <div class="close-tr">
            <img class="close-img" src="@/assets/img/share/close.png" alt="">
        </div>
    </div>
</template>
<script>
import {Base64} from 'js-base64'
export default {
    computed: {
        isShare () {
            return this.$store.state.share.isShare
        }
    },
    methods: {
        close () {
            this.$store.commit('share/setIsShare', false)
        }
    },
    mounted () {
       
    }
}
</script>
<style scoped>
.con{
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.8);
}
.arr-img{
    width: 2.06rem; height: 1.72rem; position: absolute; top: 0.5rem; right: 0.5rem;
}
.space {
    height: 2.5rem;
}
.tr{
    padding: 0.48rem 0 0.48rem 1.15rem;
}
.red-num{
    width: 0.64rem; height: 0.64rem; line-height: 0.64rem; border-radius: 50%; background: #F41601; text-align: center; color: #fff;
    display: inline-block; vertical-align: middle; font-size: 0.4rem;
}
.t-text{
    display: inline-block; vertical-align: middle; color: #fff; font-size: 0.48rem;
    padding: 0 0 0 0.26rem;
}
.share-img{
    display: inline-block; vertical-align: middle; width: 0.46rem; height: 0.4rem;
}
.close-img{
    display: block; width: 0.6rem; height: 0.6rem; margin: 0 auto;
}
.close-tr{
    padding: 0.48rem 0;
}
</style>